<template>
    <view class="footbar-box" :class="{'hidden':show}">
        <view class="footbar fixed">

            <view class="img-box" @click="goPage">
                <image src="/static/images/send.gif" alt="" mode="aspectFit" lazy-load="false"  v-if="sendingNum > 0" ></image>
                <image src="/static/images/send22.png" alt="" mode="aspectFit" lazy-load="false" v-else ></image>
            </view>
            <view class="con">
                <view v-for="item,idx in list" :key="idx">

                    <view class=" middle " v-if="item.type == 'btn'" :class="{'active':activeIdx == idx}" @click="goLink(idx)">
                        <view class="inside transBg">

                            <icon class="icon-jiahao iconfont " :class="item.icon"></icon>

                        </view>
                    </view>

                    <view class="item" v-else :class="{'active':activeIdx == idx}" @click="goLink(idx)">
                        <view>

                            <view class="img">
                                <text class="iconfont" :class="item.icon"></text>
                            </view>
                            <!-- <text class="" >{{  item.name  }} </text> -->
                        </view>
                    </view>
                </view>

            </view>
        </view>
    </view>

</template>

<script>

const app = getApp();
export default {
    props: ['show', 'activeIdx'],
    components: {},
    data () {
        return {
            list: [{ name: '主页', icon: "icon-home1" },
            { name: '产品', icon: "icon-fenlei3" },
            // { name: '主页', type: 'btn', icon: "addIcon" },
            { name: '搜索', icon: "icon-icon-test" },
            { name: '我的', icon: "icon-wode2" }],
            //正在送的数目
            p_nums:0,
            e_nums:0,
            sendingNum: 0,

        }
    },

    onShow () {

    },
    mounted () {
        app.laterToken(bool => {

          
            if (bool) {

                this.getSendOrderFunc()

            }

        })

    },
    methods: {
        goLink (idx) {

            if (idx == this.activeIdx) return

            let item = this.list[idx]

            if (item.name == '我的') {

                this.$goNext('/pages/center/index', 'redirectTo')
            }
            else if (item.name == '主页') {
                this.$goNext('/pages/index/index', 'redirectTo')
            }
            else if (item.name == '搜索') {
                this.$goNext('/pages/typeSearch/index', 'redirectTo')
            }
            else if (item.name == '产品') {
                this.$goNext('/pages/appProduct/index', 'redirectTo')
            }
        },
        contactCB (e) {
            // console.log(e.detail); // 输出：{errMsg: 'enterContact:ok'}
            // 进入客服会话页面成功，可进行自己的业务逻辑
            if (e.detail.errMsg === 'enterContact:ok') {
                swan.reportAnalytics('userMessage', {
                    visit: 1,
                    message: '进入客服页面PV'
                });
            }
            // 可进行一些进入失败的业务逻辑
            else {
                swan.reportAnalytics('userMessage', {
                    visit: 0,
                    message: '进入客服页面失败损失PV'
                });
            }
        },
        //统计是否有正在配送的订单
        getSendOrderFunc () {

            // （1待提交 5待支付 10配货中 15待配送 20配送中 25已完成 30已取消）
            let params = {
                pageNum: 1, //第几页
                pageSize: 1,
                orderStatusList: ['10', '15', '20'],
            }

            Promise.all([
                this.$axios({ url: 'flash/supermarket/order/wddd/page/list', data: params }),
                this.$axios({ url: 'flash/supermarket/order/express/wddd/page/list', data: params })
            ])
            .then(res => {

                let num = res[0].total + res[1].total

                this.p_nums = res[0].total
                this.e_nums = res[1].total

                this.sendingNum = num
                // console.log('00000000000000000', res)
            })
            .catch(()=>{
                this.sendingNum = 0
            })


        },
        goPage(){

            // console.log('没咨询吗')

            if(this.sendingNum > 0){
     
                this.$goNext('/pages/center/order/index'+( this.p_nums > 0 ? '' : '?nav=1'  )  )
                  
            }
            else{

                if(this.activeIdx == 0) return


                this.$goNext('/pages/index/index', 'redirectTo')
            }

        }
    }
}
</script>

<style scoped lang="scss">
.footbar-box {
    height: 160rpx;
    width: 100%;
}
.fixed {
    position: fixed;
    bottom: 20px;
    left: 0;
    z-index: 10;
}
.footbar {
    height: 120rpx;
    width: 90%;
    margin-left: 5%;
    // background-color: #ffff;
    background-color: #faf9fe;
    text-align: center;
    // box-shadow: 0 0px 20px rgba(97,51,202,.3);
    color: #333;
    border-radius: 100px;
    display: flex;
    padding: 0 30rpx;
    .img-box {
        height: 100%;
        line-height: 60rpx;
        margin-right: 50rpx;
        margin-left: 10rpx;
        image {
            width: 80rpx;
            height: 100%;
        }
    }
    .con {
        flex: 1;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .item {
        position: relative;
        padding: 20rpx 30rpx;
        text-align: center;
        color: #999;
        font-size: 20rpx;
        line-height: 1.1;
        &.active {
            color: #333;
            &::after {
                position: absolute;
                content: "";
                left: 30rpx;
                top: 20rpx;
                background: linear-gradient(#ffa076, #ff7596);
                opacity: 0.7;
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
                filter: blur(3px);
            }
        }
        .img {
            margin-bottom: 0rpx;
            .iconfont {
                font-size: 50rpx;
            }
        }
    }
    .middle {
        position: relative;
        top: -50rpx;
        padding: 10rpx;
        background: #fff;
        border-radius: 50%;
        .inside {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            .addIcon {
                position: absolute;
                left: 50%;
                top: 50%;
                font-size: 50rpx;
                color: #fff;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>
